<template>
	<view class="container">
		<!-- F1 header background begin -->
		<view class="header_bg">
			<image :src="head_bg" mode="aspectFill"></image>
		</view>
		<!-- header finish -->
		
		<!-- F2 four buttons Area begin -->
		<view class="menu_box">
			<view @click="_clickEvent" class="menu_item" v-for="(item,index) in menu_list" :key='index' :data-set='index'>
				<image :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- F2 four buttons finish -->
		
		<!-- F3 introduce banner image begin -->
		<view class="introduce_banner">
			<image src="../../../static/organize/organize_banner.png" mode=""></image>
		</view>
		<!-- F3 introduce bannber image finish -->
		
		<!-- F4 news List begin -->
		<view class="newsList_Container">
			<!-- F4-1 news_title begin -->
			<view class="newsList_Title">
				<text class="title">咨询新闻</text>
				<view class="moreNews" @click="_goMoreNews">
					<text>查看全部</text>
					<image src="../../../static/organize/news_more.png" mode=""></image>
				</view>
			</view>
			<!-- F4-1 news_title finish -->
			
			<!-- F4-2 news List select card -->
			
				<qc-news-segmented-control
				:current="current" 
				:values="items" 
				@clickItem="onClickItem" 
				styleType="button" 
				></qc-news-segmented-control>
				<!-- 列表项 -->
				<view class="content">
					<view  v-show="current === 0">	
							
							<!-- 选项卡1的每一个新闻 -->
							<view class="each_News" v-for="(item,index) in 3" :key='index'>
								<view class="item-text">
									<view>中国.青川“阴平村”旅行散记</view>
									<text>2020-4-28 21:30</text>
								</view>
								<image src="../../../static/organize/organize_News_img.png"></image>
							</view>
							
						
					</view>
					<view v-show="current === 1">
						
						<!-- 选项卡2的每一个新闻 -->
						<view class="each_News" v-for="(item,index) in 2" :key='index'>
							<view class="item-text">
								<view>广元景点：世外桃源阴平村</view>
								<text>2020-4-28 21:30</text>
							</view>
							<image src="../../../static/organize/organize_News_img.png"></image>
						</view>
						
					</view>
					
					<view v-show="current === 2">
						
						<!-- 选项卡3的每一个新闻 -->
						<view class="each_News" v-for="(item,index) in 2" :key='index'>
							<view class="item-text">
								<view>青川县阴平村、张家村被评为第二批全国乡村旅游重点村</view>
								<text>2020-4-28 21:30</text>
							</view>
							<image src="../../../static/organize/organize_News_img.png"></image>
						</view>
					
					</view>
					
					<view v-show="current === 3">
						
						<!-- 选项卡4的每一个新闻 -->
						<view class="each_News" v-for="(item,index) in 2" :key='index'>
							<view class="item-text">
								<view>青川县阴平村、张家村全国最佳旅游村</view>
								<text>2020-4-28 21:30</text>
							</view>
							<image src="../../../static/organize/organize_News_img.png"></image>
						</view>
					
					</view>
				</view>
		
			<!-- F4-2 news List select card -->
		</view>
		<!-- F4 news List finish -->
	</view>
</template>

<script>
import qc_news_segmented_control from '@/components/qc-news-segmented-control/qc-news-segmented-control.vue' 
	export default {
		data() {
			return {
				// head background
				head_bg:'../../../static/organize/organize_head_bg.png',
				// menu images resource
				menu_list:[
						{
							src:'../../../static/organize/organize.png',
							title:'组织构成',
							page:'../organizationStructure/organizationStructure'
						},
						{
							src:'../../../static/organize/study.png',
							title:'学习园地',
							page:'../study/study'
						},
						{
							src:'../../../static/organize/rules.png',
							title:'规章制度',
							page:'../rules/rules'
						},
						{
							src:'../../../static/organize/secretary.png',
							title:'书记风采',
							// 需要页面
							page:'',
						},
				],
				//选项卡资源
				 items: ['通知公告', '组织公告', '阴平党旗红','最新动态'],
				 current: 0,
				 news_list:[
					 
				 ]
			};
		},
		methods:{
			// 选项卡切换
			 onClickItem(e) {
			      if (this.current != e.currentIndex) {
			        this.current = e.currentIndex;
			      }
			    },
				// 菜单跳转
				_clickEvent(e){
					let index = e.currentTarget.dataset.set
					console.log('当前按钮的index',index);
					uni.navigateTo({
						url:this.menu_list[index].page
					})
				},
				_goMoreNews(){
					uni.navigateTo({
						url: '../newsList/newsList'
					});
				}
		},
		
	}
</script>

<style lang="scss">
	// 全页面怪异盒子模型计算
	:not(not){
		box-sizing: border-box;
	}
	.container{
		padding: 24rpx 30rpx;
		// F1头部背景图
		.header_bg{
			text-align: center;
			margin-bottom: 32rpx;
			image{
				display: block;
				width: 690rpx;
				height: 276rpx;
			}
			
		}
		// F2菜单部分
		.menu_box{
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-bottom: 48rpx;
			font-size: 12px;
			// F2菜单每一项
			.menu_item{
				align-items: center;
				display: flex;
				flex-direction: column;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		//F3 介绍广告
		.introduce_banner{
			margin-bottom: 50rpx;
			image{
			width: 690rpx;
			height: 160rpx;	
				border-radius: 8rpx;
			}
		}
		//F4-1 新闻列表标题部分
		.newsList_Title{
			display: flex;
			justify-content: space-between;
			.title{
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: 700;
				font-family: 'PingFang SC';
			}
			.moreNews{
				display: flex;
				align-items: center;
				color: #9F9F9F;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}	
		}
		//F4-2列表项
		// 新闻列表项
		.content{
				.each_News{
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F5F5F5;
					margin-bottom: 16rpx;
					image{
						width: 208rpx;
						height: 152rpx;
						margin-bottom: 16rpx;
					}
					.item-text{
						width: 400rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-bottom: 16rpx;
						text{
							color: #9F9F9F;
							font-size: 12px;
						}
					}
					
				}
			
		}
		
	}
</style>
